"use client"

import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
} from "@/components/ui/dialog"
import { VisuallyHidden } from "@radix-ui/react-visually-hidden"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Trophy, MapPin, Clock, Users, BarChart3 } from "lucide-react"
import type { Player, PlayerCategory } from "@/lib/types"

interface PlayerDetailModalProps {
  player: Player
  isOpen: boolean
  onClose: () => void
  category: PlayerCategory
}

export default function PlayerDetailModal({ player, isOpen, onClose, category }: PlayerDetailModalProps) {
  // Filter skills based on category
  const displaySkills =
    category === "overall"
      ? player.skills
      : player.skills.filter((skill) => {
          const categorySkillMap: Record<PlayerCategory, string[]> = {
            overall: [],
            combat: ["Sword", "Axe", "Hammer"],
            crystal: ["Shield", "Armor"],
            heart: ["Healing"],
            potion: ["Magic"],
            discord: ["Communication"],
            circle: ["Strategy"],
            sword: ["Melee"],
            axe: ["Damage"],
            hammer: ["Force"]
          }
          return categorySkillMap[category].includes(skill.name)
        })

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="bg-gray-800 text-white border-gray-700 max-w-2xl">
        <DialogHeader>
          <DialogTitle asChild>
            <VisuallyHidden>Player Details</VisuallyHidden>
          </DialogTitle>
          <DialogDescription className="text-xl font-bold text-white">
            {category === "overall"
              ? "Overall stats"
              : `${category.charAt(0).toUpperCase() + category.slice(1)} mode stats`}
          </DialogDescription>
        </DialogHeader>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 py-4">
          <div className="flex flex-col items-center text-center">
            <div className="relative mb-4">
              <div className="w-24 h-24 rounded-full overflow-hidden border-2 border-gray-600">
                <img
                  src={player.avatar || "/placeholder.svg"}
                  alt={player.name}
                  className="w-full h-full object-cover"
                />
              </div>
              <div className="absolute -top-2 -left-2 bg-gray-800 rounded-full w-8 h-8 flex items-center justify-center text-sm font-bold border border-gray-700">
                {player.rank}
              </div>
            </div>

            <h2 className="text-xl font-bold">{player.name}</h2>
            <p className="text-gray-400" style={{ color: player.title.color }}>{player.title.name}</p>

            <Badge className="mt-2 bg-amber-600 hover:bg-amber-700">{player.score.toLocaleString()} pts</Badge>

            <div className="mt-4 flex items-center gap-2 bg-gray-700/30 px-3 py-1 rounded-full">
              <Trophy className="h-4 w-4" />
              <span className="text-sm font-medium">{player.tier}</span>
            </div>
          </div>

          <div className="md:col-span-2 space-y-4">
            <div className="grid grid-cols-2 gap-4">
              <div className="bg-gray-700/50 rounded-lg p-3">
                <div className="flex items-center text-gray-400 mb-1">
                  <Trophy className="h-4 w-4 mr-2" />
                  <span className="text-sm">Rank</span>
                </div>
                <p className="text-lg font-bold">{player.rank} of 1000</p>
              </div>

              <div className="bg-gray-700/50 rounded-lg p-3">
                <div className="flex items-center text-gray-400 mb-1">
                  <MapPin className="h-4 w-4 mr-2" />
                  <span className="text-sm">Region</span>
                </div>
                <p className="text-lg font-bold">{player.region}</p>
              </div>

              <div className="bg-gray-700/50 rounded-lg p-3">
                <div className="flex items-center text-gray-400 mb-1">
                  <Clock className="h-4 w-4 mr-2" />
                  <span className="text-sm">Play Time</span>
                </div>
                <p className="text-lg font-bold">{player.playTime} hours</p>
              </div>

              <div className="bg-gray-700/50 rounded-lg p-3">
                <div className="flex items-center text-gray-400 mb-1">
                  <Users className="h-4 w-4 mr-2" />
                  <span className="text-sm">Team</span>
                </div>
                <p className="text-lg font-bold">{player.team || "Solo Player"}</p>
              </div>
            </div>

            <div className="bg-gray-700/50 rounded-lg p-4">
              <div className="flex items-center text-gray-400 mb-3">
                <BarChart3 className="h-4 w-4 mr-2" />
                <span className="text-sm">
                  {category === "overall"
                    ? "All Skills"
                    : `${category.charAt(0).toUpperCase() + category.slice(1)} Skills`}
                </span>
              </div>

              {category === "overall" ? (
                // Table-like layout for overall view
                <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
                  {displaySkills.map((skill) => (
                    <div key={skill.name} className="bg-gray-600/50 rounded-lg p-2">
                      <div className="flex justify-between items-center">
                        <span className="text-sm">{skill.name}</span>
                        <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${getTierColor(skill.tier)}`}>
                          {skill.tier}
                        </span>
                      </div>
                      <div className="mt-1 text-xs text-gray-400">{skill.points} points</div>
                    </div>
                  ))}
                </div>
              ) : (
                // Detailed view for specific modes
                <div className="space-y-3">
                  {displaySkills.map((skill) => (
                    <div key={skill.name} className="space-y-1">
                      <div className="flex justify-between text-sm">
                        <span>{skill.name}</span>
                        <span className="font-medium">
                          {skill.tier} ({skill.points} pts)
                        </span>
                      </div>
                      <div className="w-full bg-gray-600 rounded-full h-2">
                        <div
                          className={`h-2 rounded-full ${getSkillBarColor(skill.tier)}`}
                          style={{ width: `${(skill.points / 30) * 100}%` }}
                        />
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>

            <div className="bg-gray-700/50 rounded-lg p-4">
              <h3 className="text-sm text-gray-400 mb-2">Recent Achievements</h3>
              <div className="flex flex-wrap gap-2">
                {player.achievements?.map((achievement, index) => (
                  <Badge key={index} variant="secondary" className="bg-gray-600">
                    {achievement}
                  </Badge>
                ))}
                {(!player.achievements || player.achievements.length === 0) && (
                  <p className="text-sm text-gray-500">No recent achievements</p>
                )}
              </div>
            </div>
          </div>
        </div>

        <DialogFooter>
          <Button variant="outline" onClick={onClose}>
            Close
          </Button>
          <Button>View Full Profile</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}

function getTierColor(tier: string): string {
  if (tier.includes("1")) return "bg-purple-900/70 text-purple-100"
  if (tier.includes("2")) return "bg-blue-900/70 text-blue-100"
  if (tier.includes("3")) return "bg-green-900/70 text-green-100"
  if (tier.includes("4")) return "bg-yellow-900/70 text-yellow-100"
  return "bg-red-900/70 text-red-100"
}

function getSkillBarColor(tier: string): string {
  if (tier.includes("1")) return "bg-purple-500"
  if (tier.includes("2")) return "bg-blue-500"
  if (tier.includes("3")) return "bg-green-500"
  if (tier.includes("4")) return "bg-yellow-500"
  return "bg-red-500"
}
